/**
 * @author lulongwen
 * Date: 2023-08-30 22:38
 * Description: Ellipse，椭圆
 */

import { number, bool } from 'prop-types';

Ellipse.propTypes = {
  width: number,
  height: number,
  readOnly: bool,
};
Ellipse.defaultProps = {
  width: 50,
  height: 24,
  readOnly: false,
}

export function Ellipse(props) {
  const { width , height, selected, readOnly } = props;

  const cx = width / 2;
  const cy = height / 2;

  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      className={readOnly ? 'overflow-visible' : 'overflow-hidden'}
    >
      <ellipse
        cx={cx} // 75
        cy={cy} // 25
        rx={cx} // 75
        ry={cy} // 25
        fill="#ff0072"
        strokeWidth={selected && readOnly ? 2 : 0}
        stroke="#fff"
      />
    </svg>
  );
}
